---
title: Workspace Basics
order: 1
desc: Master Penpot's workspace basics! Learn interface navigation, zoom tools, dynamic alignment, rulers, guides, and shortcuts.
---

<h1 id="workspace-basics">Workspace basics</h1>
<p class="main-paragraph">The Workspace is where you create designs. You have an infinite canvas where you can directly work but you also have the ability to create pages and boards that will help you to create exportable components.</p>

<h2 id="viewport">The viewport</h2>
<p>Surrounded by panels, header and toolbars, in the middle of the workspace, you can find the viewport. The viewport is the design area of a file page. It is practically infinite. If what you need is a frame with specific, limited dimensions, you can create a board.</p>
<figure>
  <a href="/img/workspace-basics/viewport.webp" target="_blank">
    <img src="/img/workspace-basics/viewport.webp" alt="Penpot's viewport" />
  </a>
</figure>
<h4>Moving around the viewport</h4>
<p>Press <kbd>space</kbd> and drag to pan (move around the viewport). If you are using a trackpad you can do two finger scrolling.</p>
<p>You can also use the scrollbars, which are specially useful for those who love using graphic tablets.</p>
<figure>
  <video title="Navigating the viewport" muted="" playsinline="" controls="" width="100%" poster="/img/workspace-basics/viewport-navigate.webp" height="auto">
    <source src="/img/workspace-basics/viewport-navigate.mp4" type="video/mp4">
  </video>
</figure>


<h2 id="workspace-menu">The menu</h2>
<p>There's a main menu at the workspace where you will find groups with all the actions that you can do at file level. File, View, Edit, Preferences and Help.</p>
<figure>
  <img src="/img/workspace-basics/main-menu.webp" alt="Main menu" />
</figure>

<h2 id="layer-basics">Layers panel</h2>
<p>Every layer you create in Penpot’s <a href="/user-guide/designing/workspace-basics/#viewport">viewport</a> is a layer. Rectangles, ellipses, boards or text boxes are layers that you can use to build your design.</p>

<h3>Pages</h3>
<p>Pages allow you to organize layers into separate sections inside a file, and are shown in separate tabs. Subdividing a file into pages gives you the ability to split your file into logically different sections so that you can organise your work. For instance, you can use pages to separate stages of the design process but keep them in the same document. Different screen sizes, features or atomic design categories are other common ways to use pages. </p>

<p>You can add, remove or rename pages to suit your needs.</p>
<figure>
  <video title="Creating pages" muted="" playsinline="" controls="" width="auto" poster="/img/layers/pages-create.webp" height="auto">
    <source src="/img/layers/pages-create.mp4" type="video/mp4">
  </video>
</figure>

<h3>Layers</h3>
<p><strong>Layers:</strong> Layers are the different objects that you can place at the design viewport. At the layers panel you can see all the layers of a file page. Drag the layers to arrange them to different positions.</p>
<figure>
  <video title="Layers panel" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-panel.webp" height="auto">
    <source src="/img/layers/layers-panel.mp4" type="video/mp4">
  </video>
</figure>
<h4>Navigate layers using the keyboard</h4>
<ul>
  <li>Select a layer and press top/bottom arrows while pressing <kbd>Ctrl/⌘</kbd> to move them in the layers list.</li>
  <li>Press <kbd>tab</kbd> to change the layer selection to the next layer.</li>
  <li>Press <kbd>tab</kbd> + <kbd>Shift/⇧</kbd> to change the layer selection to the previous layer.</li>
  <li>If the layer contains other layers, press <kbd>Enter</kbd> to select the first layer inside the group and <kbd>Enter</kbd>+ <kbd>Shift/⇧</kbd> to move a level up.</li>
</ul>

<p>Layers are displayed from the bottom to the top of the layer stack, with layers above on the stack being shown on top in the image.</p>


<h3>Search and filter layers</h3>
<p>Reach specific layers with a simple search. You can also filter the layers list per layer type (board, group, mask, component, text, image and shape).</p>
<figure>
  <video title="Search and filter layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-search.webp" height="auto">
    <source src="/img/layers/layers-search.mp4" type="video/mp4">
  </video>
</figure>

<h3>Collapse groups and boards</h3>
<p>Groups and boards can have their contents expanded and collapsed. Click on the arrow at the
right side to toggle the visibility of their contents. </p>
<p>To collapse all the layers, and just display the boards,
press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a board to collapse them all.</p>
<figure>
  <video title="Collapse layer groups" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-collapse.webp" height="auto">
    <source src="/img/layers/layers-collapse.mp4" type="video/mp4">
  </video>
</figure>

<h2 id="focus-mode">Focus mode</h2>
<p>Focus mode zooms into the elements of a page you want to work with in a specific moment, and hides the rest so that they don’t get in the way. When the page has many elements, focus mode can also improve performance.</p>
<p>To activate focus mode:</p>
<ol> 
  <li>Select one or more elements.</li>
  <li>Right click on the selection to show the menu and select the option “Focus on” or press <kbd>F</kbd>.</li>
</ol>
<p>Notice that the layer panel will now only show the focused layers. A focus mode status line will also appear at the top.</p>
<p>To exit focus mode and return to the original viewport and selection, right click anywhere and select “Focus off” or just press <kbd>F</kbd> again. You can also click anywhere on the focus mode status line at the top of the layer panel.
</p>
<figure>
  <video title="Focus mode" muted="" playsinline="" controls="" width="100%" poster="/img/layers/layers-focus.webp" height="auto">
    <source src="/img/layers/layers-focus.mp4" type="video/mp4">
  </video>
</figure>

<h2 id="zoom">Zoom</h2>
<h3>Zoom menu</h3>
<p>To zoom in and out hold <kbd>Ctrl</kbd> (or <kbd>⌘</kbd> if using macOS) and use the scroll wheel on your mouse. You also have a bunch of useful shortcuts for the most common zoom levels that you can find at the zoom menu in the navigation bar.</p>
<p><a href="/user-guide/first-steps/shortcuts/#zoom-workspace" target="_blank">All zoom shortcuts →</a></p>
<figure>
  <img src="/img/workspace-basics/workspace-zoom.webp" alt="Zoom options" />
</figure>

<h3>Zoom lense</h3>
<p>Press left click while pressing <kbd>Z</kbd> to zoom in to a specific point and <kbd>Alt/⌥</kbd> + <kbd>Z</kbd> to zoom out.</p>
<p><img src="/img/zoom-lense.gif" alt="zoom lense" /></p>
<!--figure>
  <video title="Zoom lense" muted="" playsinline="" controls="" width="100%" poster="/img/workspace-basics/workspace-zoom-lense.webp" height="auto">
    <source src="/img/workspace-basics/workspace-zoom-lense.mp4" type="video/mp4">
  </video>
</figure-->

<h3>Zooming from the layers panel</h3>
<p>Double click over a layer icon to zoom to the layer.</p>
<figure>
  <video title="Zoom layer" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/workspace-zoom-layer.webp" height="auto">
    <source src="/img/workspace-basics/workspace-zoom-layer.mp4" type="video/mp4">
  </video>
</figure>

<h2 id="comments">Comments</h2>
<p>Comments allow the team to have one priceless conversation getting and providing feedback right over the designs and prototypes.<p>

<h3>Adding comments</h3>
<figure>
  <video title="Create comments" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/comments-create.webp" height="auto">
    <source src="/img/workspace-basics/comments-create.mp4" type="video/mp4">
  </video>
</figure>
<ol>
  <li>At the workspace, activate the comment tool by clicking the comment icon in the navbar or pressing the <kbd>C</kbd> key.</li>
  <li>Click on a location within the viewport to leave a comment. If you want the comment to appear in the board view, add the comment to the board.</li>
  <li>Write your comment in the text box.</li>
  <li>Press Post to leave the comment or Cancel to not do it.</li>
</ol>
<h3>How to reply a comment</h3>
<ol>
  <li>Open a comment by clicking at its bubble (a circled number).</li>
  <li>Write your comment at the text box at the end of the comment popup.</li>
  <li>Press Post to leave the comment or Cancel to not do it.</li>
</ol>
<h3>Mark threads as read</h3>
<p>Mark a thread as read using the checkbox at the comment box to make it disappear from the comments notifications at the dashboard.</p>
<figure>
  <img src="/img/workspace-basics/comments-mark.webp" alt="Marking comments as read" />
</figure>

<h3>Edit and remove comments</h3>
<p>At the top right of the comment popup you can find options to edit or delete comments.</p>

<h3>Dashboard notifications</h3>
<figure>
  <img src="/img/workspace-basics/comments-dashboard.webp" alt="Comments notifications" />
</figure>
<p>At your projects Dashboard you will be able to see if you have unread comments inside the files of the team.</p>


<h2 id="history">File history versions</h2>
<p>The history panel keeps track of the latest changes on an opened file as well as the different versions of the file, making it easier to track changes, revert to previous states and collaborate.</p>

<h4>View history</h4>
<p>To view the recent history of a file at the workspace click the history icon on the navbar at the left:</p>
<ul>
  <li>To see the history of file versions go to the <strong>History</strong> tab.</li>
  <li>To see the history of item changes go to the <strong>Actions</strong> tab.</li>
</ul>
<figure>
  <img src="/img/workspace-basics/history-view.webp" alt="History versions button" />
</figure>

<h3>History panel</h3>
<p>At the History panel, you can save the current version of your file, as well as access previous versions for up to 7 days.</p>

<h4>Restore versions</h4>
<p>All saved versions of the file—whether manually saved, autosaved, or pinned—can be restored, reverting the file back to its state at the selected time.</p>
<figure>
  <img src="/img/workspace-basics/history-restore.webp" alt="Restore versions" />
</figure>

<h4>Saved versions</h4>
<p>You can save the current version of your file by clicking the pin icon at the History tab. This will allow the version to be named and it will add it to your list of versions.</p>
<figure>
  <img src="/img/workspace-basics/history-save.webp" alt="Saved versions" />
</figure>

<h4>Autosaved versions</h4>
<p>When you start working on a file, Penpot will start to automatically save versions of that file across time so that you can later restore them as needed.</p>
<p>In the History tab, if you click on the autosaved versions, you’ll see a list of the exact date and time when the version was automatically saved.</p>
<figure>
  <img src="/img/workspace-basics/history-autosaved.webp" alt="Autosaved versions" />
</figure>

<h4>Pinned versions</h4>
<p>File versions can also be pinned. Pinning a file version will allow you to name it, making it easier to access at the History tab. Pinned file versions will be saved forever and can be renamed, restored or deleted at any time.</p>
<figure>
  <img src="/img/workspace-basics/history-pin.webp" alt="Pin versions" />
</figure>

<h3>Actions panel</h3>
<p>At the Actions panel, you have the layer type (rectangle, text, image...) and type of change (New, Modified, Deleted...). If you press the item, it will be reverted to its state before that specific action was performed.</p>
<figure>
  <img src="/img/workspace-basics/history-actions.webp" alt="Actions panel" />
</figure>
<p class="advice">The Actions panel shows only a limited list of changes at a current browser tab session. Refreshing the browser means refreshing the history of actions as well.</p>

<h4>Navigate actions</h4>
<p>To navigate through the actions press <kbd>Ctrl/⌘</kbd> + <kbd>Z</kbd> to go backwards and <kbd>Ctrl/⌘</kbd> + <kbd>Shift/⇧</kbd> + <kbd>Z</kbd> to go forward.</p>
<p>You can also press any item of the actions list to get to this specific state.</p>

<h2 id="shortcuts-panel">Shortcuts panel</h2>
<p>Shortcuts boost your productivity but they are not easy to learn. A handy panel at your workspace will help you with that.</p>
<p>Display the shortcuts panel at the workspace using the shortcut <kbd>?</kbd> or through the option at the <a href="/user-guide/designing/workspace-basics/#workspace-menu">main menu</a>.</p>
<p>The categories and a filter will help you to find the shortcut you need.</p>
<figure>
  <img src="/img/workspace-basics/shortcuts.webp" alt="Shortcuts panel" />
</figure>
<p><a href="/user-guide/first-steps/shortcuts/" target="_blank">Full list of shortcuts →</a></p>

<h2 id="dynamic-alignment">Dynamic alignment</h2>
<p>While moving layers at the viewport Penpot will show alignment guides for the edges and the center of the layers at sight. Dynamic alignment also snaps the layer that is being moved to those guides to help you align to the center of the edges of other layers.</p>
<figure>
  <video title="dynamic alignment" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/dynamic-alignment.webp" height="auto">
    <source src="/img/workspace-basics/dynamic-alignment.mp4" type="video/mp4">
  </video>
</figure>
<p>If there are more than two layers nearby and you drag one of them Penpot will show their distance to help you distribute them equally. </p>
<figure>
  <video title="dynamic alignment" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/dynamic-alignment-measurement.webp" height="auto">
    <source src="/img/workspace-basics/dynamic-alignment-measurement.mp4" type="video/mp4">
  </video>
</figure>

<h2 id="rulers">Rulers</h2>
<p>Penpot has rulers that measure in pixels.</p>
<figure>
  <video title="Rulers" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/rulers.webp" height="auto">
    <source src="/img/workspace-basics/rulers.mp4" type="video/mp4">
  </video>
</figure>

<h2 id="ruler-guides">Ruler guides</h2>
<p>To create ruler guides click anywhere on the ruler an drag to some point of the viewport. Click on the vertical ruler to create a vertical guide and the horizontal ruler to you know what.</p>
<figure>
  <video title="Ruler guides" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/ruler-guides.webp" height="auto">
    <source src="/img/workspace-basics/ruler-guides.mp4" type="video/mp4">
  </video>
</figure><p>To <strong>delete ruler guides</strong> drag the guide to the ruler or select the guide and press delete / supr.</p>
<p>To <strong>show/hide ruler guides</strong> use the same shortcut as for rulers: <kbd>Shift/CMD + Ctrl + R</kbd></p>

<h2 id="guides">Guides</h2>
<p>Guides are design aids that are used to help you to align content to a
geometric structure. In Penpot there are three types of guides:
<strong>square</strong>, <strong>columns</strong> and <strong>rows</strong>.</p>

<p><strong>Note:</strong> Guides are only visible in the viewport and will never be shown on exports.</p>

<h3 id="add-guides">Add guides</h3>
<p>Guides can be added at board level. With a board selected, in the design sidebar you'll find the section "Guides". Click the "+" button to add a guide to the selected board. You can add as many guides as you want.</p>
<figure>
  <video title="Create guides" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/guides-create.webp" height="auto">
    <source src="/img/workspace-basics/guides-create.mp4" type="video/mp4">
  </video>
</figure>
<h3 id="hide-remove-guides">Hide and remove guides</h3>
<p>You can hide a specific guide by clicking at the eye button of a guide configuration. If you want to remove a guide, use the "-" button at the right side of the guide settings.</p>
<figure>
  <video title="Delete and hide guides" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/guides-delete-hide.webp" height="auto">
    <source src="/img/workspace-basics/guides-delete-hide.mp4" type="video/mp4">
  </video>
</figure>

<h3 id="square-guides">Square guides</h3>
<figure>
  <video title="Square guides" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/guides-square.webp" height="auto">
    <source src="/img/workspace-basics/guides-square.mp4" type="video/mp4">
  </video>
</figure>
<p>The options for square guides are:</p>
<ul>
  <li><strong>Size</strong> (in pixels) </li>
  <li><strong>Color</strong></li>
  <li><strong>Opacity</strong> </li>
</ul>

<h3 id="row-guides">Row guides</h3>
<figure>
  <video title="Row guides" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/guides-rows.webp" height="auto">
    <source src="/img/workspace-basics/guides-rows.mp4" type="video/mp4">
  </video>
<p>The options for row guides are:</p>
<ul>
  <li><strong>Rows</strong></li>
  <li><strong>Type</strong> - stretch, top, center bottom</li>
  <li><strong>Height</strong> - "auto" by default.</li>
  <li><strong>Gutter</strong> - the space between each row.</li>
  <li><strong>Margin</strong></li>
  <li><strong>Color</strong></li>
  <li><strong>Opacity</strong></li>
</ul>

<h3 id="column-guides">Column guides</h3>
<figure>
  <video title="Column guides" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/guides-column.webp" height="auto">
    <source src="/img/workspace-basics/guides-column.mp4" type="video/mp4">
  </video>
<p>The options for column guides are:</p>
<ul>
  <li><strong>Columns</strong></li>
  <li><strong>Type</strong> - stretch, top, center bottom</li>
  <li><strong>Width</strong> - "auto" by default.</li>
  <li><strong>Gutter</strong> - the space between each column.</li>
  <li><strong>Margin</strong></li>
  <li><strong>Color</strong></li>
  <li><strong>Opacity</strong></li>
</ul>

<h3 id="guides-defaults">Guides defaults</h3>
<p>The first guides configuration (type, color, sizes...) that you get when adding guides is the default for each file guides. 
<ul>
  <li>Restore the properties of guides to the default by using the "Use default" button.</li>
  <li>Change the default settings to the ones of a guide by using the "Set as default" button.</li>
</ul>
<figure>
  <video title="Guide defaults" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/guides-default.webp" height="auto">
    <source src="/img/workspace-basics/guides-default.mp4" type="video/mp4">
  </video>
</figure>

<h3 id="guides-visibility">Guides visibility</h3>
<p>To hide or show all the guides at a file you can press <kbd>Ctrl/⌘</kbd> + <kbd>´</kbd> or use the option at the main menu at the top left of the navbar.</p>

<h3 id="guides-snap">Snap to guides</h3>
<p>If you want to enable or disable the snapping to guides you can press <kbd>Shift/⇧</kbd> + <kbd>Ctrl/⌘</kbd> + <kbd>´</kbd> or use the option at the main menu at the top left of the navbar.</p>
<figure>
  <video title="Guides snap" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/guides-snap.webp" height="auto">
    <source src="/img/workspace-basics/guides-snap.mp4" type="video/mp4">
  </video>
</figure>


<h2 id="snap-to-pixel">Snap to pixel</h2>
<p>Layers automatically snap to the pixel grid. If you need a different kind of precision like working at subpixel level using measures with decimals you can disable this option anytime from the main menu.</p>
<figure>
  <img src="/img/workspace-basics/workspace-snap.webp" alt="Snap to pixel setting" />
</figure>

<h2 id="nudge-amount">Nudge amount</h2>
<p>Set your chosen distance to move layers using the keyboard. This is a must if you’re working with guides (if you’re not, you should ;)). Being able to adjust the movement to your baseline grid (8px? 5px?) is a huge timesaver that will improve your quality of life while designing.</p>
<figure>
  <img src="/img/workspace-basics/nudge.webp" alt="Nudge amount prompt" />
</figure>
<p>To adjust the nudge values (small and big), you can find the option at the main menu inside Preferences.</p>
<figure>
  <img src="/img/workspace-basics/nudge-menu.webp" alt="Nudge amount prompt" />
</figure>


